<script setup>
import { ref, watchEffect } from 'vue';
	const props = defineProps({
		data:{
			type: Array,
			default: () => ([])
		}
	})
	const emits = defineEmits(['change'])
	const current = ref(0);
	watchEffect(() => {
		if(props.data.length){
			console.log(props.data)
		}
	})
	function handleItemClick(item, j, i){
		item.chooseIndex = j
		const isEnd = i === props.data.length - 1
		emits('change',{
			amount: computedAmount(),
			index: i+1,
			isEnd,
			percent: 50+Math.round((i+1) / props.data.length * 49)
		})
		
		if(!isEnd){
			current.value++
		}
	}
	function computedAmount(){
		return props.data.reduce((prev, cur) => {
			if(typeof cur.chooseIndex == 'number'){
				return cur.itemList[cur.chooseIndex].amount + prev
			}
			return prev
			
		},0)
	}
</script>
<template>
	
	<swiper class="swiper" :current="current" :disable-touch="true">
					<swiper-item v-for="(item, i) in props.data" :key="i" >
							<view class="title">
								{{item.name}}
							</view>
							<view class="list-box">
								<view  
									v-for="(item2, j) in item.itemList" 
									:key="j" 
									@click="handleItemClick(item, j, i)" 
									:class="['item', item.chooseIndex==j ? 'choose':'']"
								>
									{{item2.name}}
								</view>
							</view>
					</swiper-item>
					</swiper>
</template>

<style lang="scss" scoped>
	.swiper{
		height: 70vh;
	}
	.title{
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		margin-top: 50px;
		margin-bottom:50rpx;
		color: #333;
	}
	.list-box{
		padding: 0 50rpx;
		.item{
			color: #333;
			border-radius: 100px;
			padding: 30rpx 30rpx;
			background-color: #f5f5f5;
			font-size: 28rpx;
			margin-bottom: 50rpx;
			text-align: center;
			&.choose {
				background: var(--primary-color);
				color: #fff;
			}
		}
	}
</style>